<template>
<div class="headerMain">
  <router-link to="" class="userLink">
    <q-item class="bg-primary userCard">
    <q-item-side avatar="../../statics/quasar-logo.png" />
    <q-item-main>
        <q-item-tile label>
            张无忌
            <span class="userLv">
                Lv.26
            </span>
        </q-item-tile>
        <q-item-tile sublabel>Subhead</q-item-tile>
    </q-item-main>
    <q-item-side icon="fa-angle-right"></q-item-side>
    </q-item>
  </router-link>
</div>
</template>

<style scoped>
.headerMain {height: 100%;}
.userLink {color: #000;}
.userCard {padding: 20px 15px;}
.userLv {background-color: #f44336; padding: 0 5px; border-radius: 16px; font-size: 9px;height:13px; display: inline-flex; width: 42px; color: #fff; font-style: italic;}
</style>